import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Link} from 'react-router-dom';
import { Carousel, ActivityIndicator } from 'antd-mobile';
import {getQueryString} from '../utils/util';
import { get } from '../api/getData';
import 'antd-mobile/lib/carousel/style/index.css';
import 'antd-mobile/lib/activity-indicator/style/index.css';
import '../static/styles/detail.css';

class Detail extends Component {
    constructor(props) {
        super(props);
        this.state = {
            title:'',
            cost:'',
            limit_of_number:'',
            route:'',
            type:'',
            strength:'',
            view_index:'',
            collection_time:'',
            collection_place:'',
            sort:'',
            on_line_time:'',
            off_line_time:'',
            img:'',
            classify:'',
            id:0,
            imgs:[],
            imgHeight:180,
            animating:false
        }
    }

    componentDidMount() {
        document.title = '详情';
        let id = getQueryString('id');
        let __this = this;
        __this.setState({
            animating:true
        });
        get('/api/activity/info', {id:id} , function(error, data){
            __this.setState({
                animating:false
            });
            if(null === error){
                if(data.code === 0){
                    __this.setState({
                        ...data.data
                    });
                }
            }
        });
        document.body.style.overflow = 'auto';
    }

    baoming(){
        window.location.href = '/enroll';
    }

    redirectShowImgs(){
        window.location.href = '/detail/imgs'
    }

    render() {
        let strength = [];
        let viewIndex = [];
        for (var i = 1; i <= 5; i++) {
            if(i <= this.state.strength){
                strength.push(<div key={i} className='active'></div>)
            }else{
                strength.push(<div key={i}></div>);
            }
        }
        for (var i = 1; i <= 5; i++) {
            if(i <= this.state.view_index){
                viewIndex.push(<div key={i} className='active'></div>)
            }else{
                viewIndex.push(<div  key={i}></div>);
            }
        }
        return (<div>
            {
                this.state.animating
                ?
                <ActivityIndicator
                    toast
                    text="Loading..."
                />
                :
                ''
            }
            <div className='detail-head'>
                <Carousel
                    autoplay={true}
                    infinite={true}
                    autoplayInterval={2000}
                  >
                    {this.state.imgs.map(val => (
                      <a
                        key={val.img}
                        style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
                      >
                        <img
                          src={val.img}
                          alt={val.title}
                          style={{ width: '100%', verticalAlign: 'top' }}
                          onLoad={() => {
                            // fire window resize event to change height
                            window.dispatchEvent(new Event('resize'));
                            this.setState({ imgHeight: 'auto' });
                          }}
                        />
                      </a>
                    ))}
                  </Carousel>
                <div className='detail-head-title'>
                    <div>{this.state.title}</div>
                    <div>￥{this.state.cost}元</div>
                </div>
            </div>

            <div className='detail-item'>
                <div className='detail-title'>活动详情</div>
                <div className='detail-item-content'>
                    <div>【活动路线】{this.state.route}</div>
                    <div>【活动形式】{this.state.type}</div>
                    <div className='xingxing'>
                        【活动强度】
                        {strength}
                    </div>
                    <div className='xingxing'>
                        【风景指数】
                        {viewIndex}
                    </div>
                    <div>【集合时间】{this.state.collection_time}</div>
                    <div>【集合地点】{this.state.collection_place} 建议用“智行火车票”APP先抢票，抢不到再咨询组织者，我们有办法可以弄到火车票</div>
                    <div>【报名剩余】{this.state.surplus_number}人</div>
                </div>
            </div>
            <div className='detail-item'>
                <div className='detail-title'>活动路线</div>
                <div>
                    <div dangerouslySetInnerHTML={{__html: this.state.route_info}}></div>
                </div>
            </div>
            <div className='detail-item'>
                <div className='detail-title'>小贴士</div>
                <div className='detail-item-content'>
                    <div><span>1.</span>登山鞋或防滑运动鞋，适合运动的衣裤（温度15-28度）小型登山包，登山杖护膝有就带上</div>
                    <div><span>2.</span>个人洗簌用品、换洗衣服</div>
                    <div><span>3.</span>预备一个路餐及零食（建议巧克力，牛肉干，士力架，葡萄干，面包，奶片等高热量食品，其他路餐可沿路购买，也有商店可以自费吃面吃饭）</div>
                    <div><span>问:</span>怎样算报名成功？</div>
                    <div><span>答:</span>确定去个人资料发送到微信号：13755148556或QQ：97516407(个人资料包含：姓名+身份证号+联系电话+活动日期名称），出发前一天会有短信通知领队司机车牌注意事项。</div>
                </div>
            </div>
            <div className='detail-item detail-footer'>
                <div className='detail-title'>费用说明 <span>￥{this.state.cost}/人</span> 限制{this.state.limit_of_number}人 剩余{this.state.surplus_number}</div>
                <div>
                    <div dangerouslySetInnerHTML={{__html: this.state.cost_info}}></div>
                </div>
            </div>

            <Link to={`/enroll?id=${this.state.id}`}>
                <div className='baoming'>
                    立即报名
                </div>
            </Link>
        </div>);
    }
}

export default Detail;
